<div>
	<!-- widget content -->
	<div class="widget-body">

		<form action="" method="post" id="checkout-form" class="smart-form">
			<header>
				<h2>
					备份存储新增
					<button class="close" data-dismiss="modal">x</button>
				</h2>
			</header>
			<fieldset>
				<div id="dialog-alert"></div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>备份存储名称</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="name"
							id="name" placeholder=" 请输入备份存储名称" class="required ">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>类型</label>
					<section class="col col-8">
						<label class="select"> <select class="required"
							name="type" id="type" placeholder="选择类型...">
						</select><i></i>
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>IP地址</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="ip"
							class="required ip" placeholder="请输入IP地址">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>源目录</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="dir"
							placeholder=" 请输入源目录" class="required">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>挂载目录</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="mountDir"
							placeholder=" 请输入挂载目录" class="required">
						</label>
					</section>
				</div>
				<div class="row">
					<label class="label col col-3"><label style="color: red">*</label>挂载参数</label>
					<section class="col col-8">
						<label class="input"> <input type="text" name="mountOpts"
							placeholder=" 请输入挂载参数" class="required">
						</label>
					</section>
				</div>
				<div style="display: none;">
					<input type="text" name="site" id="site" value="">
				</div>
			</fieldset>
		</form>
	</div>
	<!-- end widget content -->

</div>
<div class="modal-footer">

	<button type="button" class="btn btn-default btn-sm"
		data-dismiss="modal">取消</button>
	<button type="submit" class="btn btn-primary btn-sm" id="submitbtn">
		保存</button>
</div>
<script>
    pageSetUp();
	
    var type,$type;
    var pagefunction = function() {
    	 //请求表单中的内容-如select并填充到页面
    	var siteid=getSession("siteId");
    	$('#site').val(siteid);
    	
    	$type = $("#type").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'text'},
    		options: []
    	});
    	sendGet("/upm_manager/v1.0/selections/backup_storage_types?site="+siteid+"&enabled=1",fillSelect,DialogAlert,null);
 		 
        var errorClass = 'invalid';
        var errorElement = 'em';
        var options={
                errorClass: errorClass,
                errorElement:errorElement,
                highlight: function(element) {
                    $(element).parent().removeClass('state-success').addClass("state-error");
                    $(element).removeClass('valid');
                },
                unhighlight: function(element) {
                    $(element).parent().removeClass("state-error").addClass('state-success');
                    $(element).addClass('valid');

                },
                // Rules for form validation
                // Messages for form validation
                messages:{
                	name : {
                        required : '请输入备份存储名'
                    },
                    type : {
                        required : '请选择类型'
                    },
                    ip: {
                        required : '请输入IP地址',
                        ip:'请输入正确的IP地址'
                    },
                    dir : {
                        required : '请输入源目录'
                    },
                    mountDir : {
                        required : '请输入挂载目录'
                    },
                    mountOpts : {
                        required : '请输入挂载参数'
                    }
                },
                errorPlacement : function(error, element) {
                    if($(element).next("div").hasClass("tooltip")) {
                        $(element).attr("data-original-title", $(error).text()).tooltip("show");
                    } else {
                        $(element).attr("title",
                                $(error).text()).tooltip("show");
                    }
                },
                submitHandler:function(form){
                	//在这里生成需要提交的json数据
                	var data=$('#checkout-form').serializeArray();
                	var jsonData=arrayToString(data);
                	sendPost("/upm_manager/v1.0/backup_storages", postSuccess,DialogAlert, jsonData, null);
                }
            };
        $('#checkout-form').validate(options);
    };
    loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);
    $('#submitbtn').click(function() {
    	DialogAlertClear();
    	$('#checkout-form').submit();
    });
    function postSuccess(data){
    	$("#addModal").modal('toggle');
    	sendGet("/upm_manager/v1.0/backup_storages?site="+getSession("siteId"),reloadGrid,ListAlert,null);
    }
    function fillSelect(data){
    	type = $type[0].selectize;
    	type.clearOptions();
    	$.each(data, function(k, v){
    		type.addOption(v);
    	});
    }
</script>
